import { GraphProps } from '../component/graph/graph';
import {
    EChartOption,
    getEchartsLinearColor,
    // LinearGradient,
    colorChunk,
    // SelectionType
} from '../utils/common';
import { AmountData } from '../stores/GraphDataStore';

export interface FormatterType {
    componentType: 'series';
    // 系列类型
    seriesType: string;
    // 系列在传入的 option.series 中的 index
    seriesIndex: number;
    // 系列名称
    seriesName: string;
    // 数据名，类目名
    name: string;
    // 数据在传入的 data 数组中的 index
    dataIndex: number;
    // 传入的原始数据项
    data: Object;
    // 传入的数据值
    value: number | Array<number>;
    // 数据图形的颜色
    color: string;
    // 百分比
    percent: number;
    // 
    galleryViewPath?: string;
    // 
    galleryEditorPath?: string;
    // 
    imagePath?: string;
    // 
    gl?: string;
}

// 柱状图颜色渐变
const barEvenColor = getEchartsLinearColor('#A454BD', '#8AD0EE');
const barOddColor = getEchartsLinearColor('#EA4C96', '#DEA8E3');

// 柱状图颜色渐变2

const barDataEvenColor = getEchartsLinearColor('#6C83E3', '#ACE8E1');
const barDataOddColor = getEchartsLinearColor('#ED9F50', '#F6D673');

export function initGraphOption(graphProps: GraphProps) {
    let option: EChartOption = {};
    const { data, graphType, graphTitle } = graphProps;
    if (graphType === 'pie' || graphType === 'dataPie') {
        option = {
            tooltip: {
                show: true,
                formatter: '{b}: {d}%'
            },
            grid: {
                left: 20,
                right: 20,
                width: '90%'
            },
            legend: {
                type: 'plain',
                orient: 'horizontal',
                show: true,
                itemWidth: 15,
                itemHeight: 15,
                itemGap: 5,
                padding: 0,
                left: 'center',
                bottom: 15,
                data: data.map((v: AmountData) => (v.name)),
                textStyle: {
                    fontSize: 12
                }
            },
            series: [
                {
                    name: graphTitle,
                    type: 'pie',
                    radius: '70%',
                    center: ['50%', '50%'],
                    data: data.map((v: AmountData, i: number) => ({
                        name: v.name,
                        value: v.value,
                        itemStyle: {
                            normal: {
                                color: colorChunk[i],
                            }
                        },
                        label: {
                            normal: {
                                textStyle: {
                                    color: '#4A4A4A',
                                    fontSize: 9,
                                },
                                align: 'center',
                                position: 'outside',
                                formatter: graphType === 'pie' ?
                                    ((params: FormatterType) => (params.name + params.value + '个'))
                                    : ((params: FormatterType) => (
                                        params.name + ',' + params.value + ',(' + params.percent + '%)'))
                            }
                        },
                    })),
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: 'rgba(0, 0, 0, 0.3)'
                            },
                            smooth: 0.2,
                            length: 5,
                            length2: 8
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: colorChunk,
                        }
                    },
                }
            ]
        };
    } else if (graphType === 'bar' || graphType === 'dataBar') {
        const firstColor = graphType === 'bar' ? barEvenColor : barDataEvenColor;
        const secondColor = graphType === 'bar' ? barOddColor : barDataOddColor;
        option = {
            title: {
                show: false
            },
            tooltip: {
                show: true
            },
            grid: {
                top: 40,
                left: 50,
                right: 10,
            },
            xAxis: [
                {
                    type: 'category',
                    data: data.map((v: AmountData, i: number) => (
                        {
                            value: v.name,
                            textStyle:
                                {
                                    fontStyle: 'oblique',
                                    color: '#4A4A4A',
                                    fontSize: 9
                                }
                        }
                    )),
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    nameTextStyle: {
                        fontSize: 8
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 40
                    }
                },
                {
                    type: 'category',
                    data: data.map((v: AmountData, i: number) => (
                        {
                            value: v.value,
                            textStyle:
                                {
                                    color: '#4A4A4A',
                                    fontSize: 12
                                }
                        }
                    )),
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    nameTextStyle: {
                        fontSize: 8
                    },
                }
            ],
            yAxis: {
                type: 'value',
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    color: '#4A4A4A',
                    fontSize: 9
                }
            },
            series: [
                {
                    type: 'bar',
                    xAxisIndex: 1,
                    itemStyle: {
                        normal: {
                            color: '#E5E9F2',
                            barBorderRadius: 10,
                        },
                    },
                    data: data.map((v: AmountData, i: number) =>
                        (data.reduce((a, b) => a.value > b.value ? a : b).value))
                    ,
                    barWidth: 10,
                    barMinHeight: 40,
                    animation: false,
                    silent: true
                },
                {
                    name: graphTitle,
                    type: 'bar',
                    data: data.map((v: AmountData, i: number) => ({
                        value: v.value,
                        itemStyle: {
                            normal: {
                                color: (i + 1) % 2 !== 0 ? firstColor : secondColor,
                                opacity: 0.9
                            },
                        }
                    })),
                    itemStyle: {
                        normal: {
                            barBorderRadius: 10,
                        },
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#615a5a'
                            },
                            formatter: (params: { value: number }) => {
                                if (params.value === 0) {
                                    return '';
                                } else {
                                    return params.value;
                                }
                            }
                        }
                    },
                    barWidth: 10,
                    barMinHeight: 40,
                    animation: true,
                },
            ]
        };
    }
    return option;
}
